<template>
  <div class="form-control">
    <el-form :model="clazz" label-width="auto">

      <el-form-item label="开班时间">
        <el-date-picker v-model="clazz.start_time" type="date"
                        placeholder="请选择开班时间" style="width: 100%"
                        value-format="YYYY-MM-DD"
                        :default-value="currentTime"/>
      </el-form-item>

      <el-form-item label="班级名称">
        <el-input
            v-model="clazz.name"
            type="text"
            placeholder="请输入班级名称"/>
      </el-form-item>

      <el-form-item label="课程时长">
        <el-input v-model="clazz.duration" placeholder="请输入课程时长">
          <template #append>月</template>
        </el-input>
      </el-form-item>

      <el-form-item label="班主任">
        <el-input
            v-model="clazz.manage"
            type="text"
            placeholder="请输入班主任名称"
        />
      </el-form-item>


    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      clazz: {
        name: null,
        manage: null,
        duration: null,
      }
    }
  },
  created() {
    window.$bus.on("add-clazz", this.saveClazz);
  },
  methods: {
    saveClazz(index) {
      // 保存班级信息
      console.log(index);

      // 向 父页面 消息总线 发送 close-win 关闭窗口事件、通知父页面 关闭弹框
      // 父页面 监听 close-win , 并关闭该窗口
      parent.$bus.emit('close-win', index);
    }
  },
  computed: {
    currentTime() {
      return new Date();
    }
  }
}
</script>

<style scoped>
.form-control {
  padding: 30px 30px 10px;
}
</style>